import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { withRouter } from 'react-router';
import Select, { Option } from '@kuiper-components/select';
import Button from '@kuiper-components/button';
import {
	TASK_CATEGORY_TYPES_MAP,
	TASK_KEY_LABEL_MAP,
} from '../../../../../../../common/constants';
import DateRange from '../../../../../../components/DateRange';
import HostSearchInput from '../../../../../../components/HostSearchInput';
import s from './WeaknessToolbox.module.css';

const VUL_TRIGGER_OPTIONS = [
	{
		name: '周期性增量',
		key: 'scheduleIncrement',
		value: {
			taskTriggerType: 'scheduleIncrement',
			// taskSettingsCollectType: 'increment',
		},
	},
	{
		name: '周期性全量',
		key: 'schedule',
		value: {
			taskTriggerType: 'schedule',
			// taskSettingsCollectType: 'full',
		},
	},
	{
		name: '自定义',
		key: 'manual',
		value: { taskTriggerType: 'manual' },
	},
	{
		name: '专项',
		key: 'special',
		value: { taskTriggerType: 'special' },
	},
];

const SSL_TRIGGER_OPTIONS = [
	{
		name: '周期性',
		key: 'schedule',
		value: { taskTriggerType: 'schedule' },
	},
	{
		name: '自定义',
		key: 'manual',
		value: { taskTriggerType: 'manual' },
	},
];

function Toolbox({ className, reSearch, getDropdownRef, location }) {
	const filter = React.useMemo(
		() =>
			JSON.parse(new URLSearchParams(location.search).get('filter') || '{}'),
		[location]
	);
	const dateRange = React.useMemo(
		() => ({
			startTime: filter?.createTimeGTE,
			endTime: filter?.createTimeLTE,
		}),
		[location]
	);

	const triggerOptions =
		filter?.taskType === 'ssl' ? SSL_TRIGGER_OPTIONS : VUL_TRIGGER_OPTIONS;

	const handleTaskTriggerTypeChange = value => {
		reSearch({
			taskTriggerType: value || undefined,
		});
	};

	const handleTaskTypeChange = taskType => {
		const variables = { taskType };
		if (
			taskType === 'ssl' &&
			(filter?.taskTriggerType === 'special' ||
				filter?.taskTriggerType === 'scheduleIncrement')
		) {
			variables.taskTriggerType = undefined;
		}
		reSearch(variables);
	};

	const handleDateChange = ({ startTime, endTime }) => {
		reSearch({
			createTimeGTE: startTime,
			createTimeLTE: endTime,
		});
	};
	const handleReset = () =>
		reSearch({
			taskType: 'ssl',
			taskTriggerType: undefined,
			createTimeGTE: undefined,
			createTimeLTE: undefined,
		});

	return (
		<div className={cn(className, s.toolbox)}>
			<HostSearchInput
				value={filter?.targetSearch}
				onChange={targetSearch => reSearch({ targetSearch })}
				className={s.item}
				placeholder="请输入风险地址"
			/>
			<div className={s.filters}>
				{/* <Select
					allowClear
					placeholder="监测类型"
					value={filter?.taskType}
					onChange={handleTaskTypeChange}
					className={s.item}
					getPopupContainer={getDropdownRef}
				>
					{TASK_CATEGORY_TYPES_MAP.weakness.map(cate => (
						<Option key={cate}>{TASK_KEY_LABEL_MAP[cate]}监测</Option>
					))}
				</Select> */}
				<Select
					allowClear
					placeholder="监测方式"
					className={s.item}
					value={filter?.taskTriggerType}
					onChange={handleTaskTriggerTypeChange}
					getPopupContainer={getDropdownRef}
				>
					{SSL_TRIGGER_OPTIONS.map(({ name, key }) => (
						<Option key={key} value={key}>
							{name}
						</Option>
					))}
				</Select>
				<DateRange
					className={s.item}
					value={dateRange}
					onChange={handleDateChange}
					maxDay={180}
				/>
				<Button className={s.item} onClick={handleReset}>
					重置
				</Button>
			</div>
		</div>
	);
}

Toolbox.propTypes = {
	className: PropTypes.string,
	reSearch: PropTypes.func,
	getDropdownRef: PropTypes.func,
	location: PropTypes.shape({
		search: PropTypes.string,
	}),
};

Toolbox.defaultProps = {
	className: s.toolbox,
};

export default withRouter(Toolbox);
